<!--
 * @Author: 王灿
 * @Date: 2019-11-11 21:21:20
 * @LastEditTime: 2020-03-17 10:44:01
 * @Description: 富文本  -    使用 tinymce
 * @FilePath: \scarlet-sparrow-admin\src\components\jq-tinymce\index.vue
 -->
<template>
  <div>
    <editor v-model="myValue" :init="init"></editor>
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/lineheight'
import { getUploadKey, getDownUrl } from '@/api/commodity.js'
import { Message } from 'element-ui'
export default {
  name: 'JqTinymce',
  components: { Editor },
  props: {
    // 富文本默认数据
    value: {
      type: String,
      default: ''
    },
    // 默认高度
    minHeight: {
      type: Number,
      default: 0
    },
    // 更新标记
    isUpdate: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: 'link lists image code table wordcount lineheight'
    },
    toolbar: {
      type: [String, Array],
      default:
        'undo redo | bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | link unlink image code lineheight | removeformat | mybutton'
    }
  },
  data() {
    return {
      myValue: this.value,
      init: {
        language_url: '/tinymce/langs/zh_CN.js', // 语言包
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide', // skin路径
        plugins: this.plugins,
        toolbar: this.toolbar,
        image_class_list: [{ title: '无', value: '' }],
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        branding: false,
        min_height: this.minHeight,
        font_formats:
          '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;' +
          'Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;' +
          'Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;' +
          'Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;',
        content_style: `
          html, body     { font-size: 14px; margin: 0; }
          iframe         { width: 100%; }
          body           { padding: 10px 16px !important; }
          a              { text-decoration: none; }
       `,
        // menubar: false, // 顶部菜单栏显示
        images_upload_handler: (blobInfo, success, failure) => {
          // 获取上传key
          getUploadKey({
            type: 1,
            fileName: blobInfo.filename()
          }).then(res => {
            // 上传腾讯云
            let form = new FormData()
            form.append('key', res.data.fileName)
            form.append('file', blobInfo.blob())
            let oReqCos = new XMLHttpRequest()
            oReqCos.open('POST', res.data.uploadKey)
            oReqCos.setRequestHeader(
              'Content-Security-Policy',
              'upgrade-insecure-requests'
            )
            oReqCos.onload = function(oEvent) {
              if (oReqCos.status === 204) {
                Message({
                  message: '上传成功',
                  type: 'success'
                })
                // 下载图片并显示
                getDownUrl({
                  fileName: res.data.fileName
                }).then(response => {
                  success(response.data.url.split('?')[0])
                })
              }
            }
            oReqCos.send(form)
          })
        },
        setup: (editor) => {
          editor.ui.registry.addButton('mybutton', {
            // text: '左右外边距',
            icon: 'plus',
            tooltip: '左右外边距',
            onAction: () => {
              editor.selection.getNode().style.margin = '0 20px'
            }
          })
        }
      }
    }
  },
  watch: {
    // 获取编辑时默认数据
    value(newValue) {
      if (!this.isUpdate) {
        this.myValue = newValue
      }
    },
    // 传值
    myValue(newValue) {
      this.$emit('input', newValue)
    }
  },
  mounted() {
    // 初始化
    tinymce.init({})
  }
}
</script>

<style lang="scss" >
.tox-tinymce-aux {
  z-index: 9999 !important;
}
</style>